<template>
    <el-container class="manager-page">
        <el-aside width="200px" class="left-box">
            <LeftMenu />
        </el-aside>
        <el-container>
            <el-header class="top-box">
                <el-icon>
                    <Fold />
                </el-icon>
                <!-- 下拉菜单 -->
                <el-dropdown class="right-dropdown">
                    <span>
                        欢迎登录：温壮
                        <el-icon>
                            <Arrow-Down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>我的信息</el-dropdown-item>
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item divided>退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
                </el-dropdown>
            </el-header>
            <el-main class="main-box">
                <!-- 根据路径展示不同的组件（虚拟页面） -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template> 

<script>
//导入组件
import LeftMenu from "../components/LeftMenu.vue";
import { Fold,ArrowDown } from "@element-plus/icons-vue";
export default {
    name:"Manager",
    components: {
        LeftMenu:LeftMenu,
        Fold,
        ArrowDown
    }
};
</script>

<style lang="scss" scoped>
.manager-page {
    height: 100%;
    .left-box {
        border-right: 1px solid lightgray; 
        overflow: hidden;
    }
    .top-box {
        height: 50px;
        border-bottom: 1px solid lightgray;
        padding: 0px 5px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .right-dropdown {
        color: deeppink;
        margin-right: 20px;
    }
    .main-box {
        background-color: #f5f7f9;
        padding: 5px;
        box-sizing: border-box;
    }
}
</style>